import { defineStore } from 'pinia';
import { computed, ref, unref } from 'vue';

import { useI18n } from '@/locale/index';
import { getIsTabbar } from '@/utils';
import { HEXColor, SkinInfo, SkinStyle, ThemeVar } from '#/store';

import { useThemeStore } from './theme';

/** 初始状态 */
const initState: SkinInfo = {
  /** 类型 */
  class: 'fire',
};

/** 皮肤存储 */
export const useSkinStore = defineStore(
  'app-skin',
  () => {
    /** 皮肤信息 */
    const state = ref<SkinInfo>({ ...initState });

    const { t } = useI18n();
    const themeStore = useThemeStore();

    /** 获取类型 */
    const getClass = computed(() => unref(state).class);
    /** 获取样式 */
    const getStyle = computed(() => unref(state).style);
    /** 获取当前样式 */
    const getCurrentStyle = computed<SkinStyle>(() => {
      let style = unref(getStyle)?.light;
      const currentTheme = themeStore.getCurrentTheme;
      if (currentTheme === 'dark') {
        style = unref(getStyle)?.dark;
      }
      return style;
    });
    /** 获取当前主题色 */
    const getCurrentThemeColor = computed(() => {
      const item = unref(getThemeColorList).filter(
        (o) => o.color === unref(getCurrentStyle)?.themeColor,
      );
      return item?.length > 0 ? item[0] : null;
    });

    /** 获取类型列表 */
    const getClassList = computed(() => {
      return [
        { value: 'fire', label: t('layout.skin.class.fire'), icon: 'i-emojione:fire' },
        { value: 'water', label: t('layout.skin.class.water'), icon: 'i-emojione:fog' },
        { value: 'wind', label: t('layout.skin.class.wind'), icon: 'i-emojione:comet' },
      ];
    });
    /** 获取主题颜色列表 */
    const getThemeColorList = computed(() => {
      return [
        { value: 'default', label: t('layout.skin.style.themeColor.default'), color: null },
        { value: 'blue', label: t('layout.skin.style.themeColor.blue'), color: '#007aff' },
        { value: 'red', label: t('layout.skin.style.themeColor.red'), color: '#ff1a1a' },
        { value: 'green', label: t('layout.skin.style.themeColor.green'), color: '#0d800d' },
        // { value: 'white', label: t('layout.skin.style.themeColor.white'), color: '#efebdc' },
      ];
    });

    /** 设置类型 */
    const setClass = (value: 'fire' | 'water' | 'wind') => {
      state.value = { ...state.value, class: value };
    };
    /** 设置样式 */
    const setStyle = (style: { light?: SkinStyle; dark?: SkinStyle }) => {
      state.value = { ...state.value, style };
      let currStyle = style.light;
      const currentTheme = themeStore.getCurrentTheme;
      if (currentTheme === 'dark') {
        currStyle = style.dark;
      }
      setCurrentStyle(currStyle);
    };
    /** 设置当前样式 */
    const setCurrentStyle = (value: SkinStyle) => {
      const currentTheme = themeStore.getCurrentTheme;
      if (currentTheme === 'dark') {
        state.value = { ...state.value, style: { ...state.value.style, dark: value } };
      } else {
        state.value = { ...state.value, style: { ...state.value.style, light: value } };
      }
      setUniStyle(value);
    };
    /** 设置主题色 */
    const setThemeColor = (color?: HEXColor | ThemeVar, theme: 'all' | 'current' = 'all') => {
      let style = unref(getStyle);
      if (theme === 'all') {
        style = {
          light: { ...style?.light, themeColor: color },
          dark: { ...style?.dark, themeColor: color },
        };
      } else {
        const currentTheme = themeStore.getCurrentTheme;
        if (currentTheme === 'dark') {
          style = {
            ...style,
            dark: { ...style?.dark, themeColor: color },
          };
        } else {
          style = {
            ...style,
            light: { ...style?.light, themeColor: color },
          };
        }
      }
      setStyle(style);
    };
    /** 获取主题色 */
    const getThemeColor = (color?: HEXColor | ThemeVar) => {
      const item = unref(getThemeColorList).filter((o) => o.color === color);
      return item?.length > 0 ? item[0] : null;
    };

    watch(
      () => themeStore.getCurrentTheme,
      (_v) => {
        setUniStyle(getCurrentStyle.value);
      },
    );

    /** 设置UNI样式 */
    const setUniStyle = (value: SkinStyle) => {
      // NavigationBar
      // uni.setNavigationBarColor({
      //   backgroundColor: getThemeStyle.value.navigationBarBackgroundColor,
      //   frontColor: getThemeStyle.value.navigationBarTextStyle,
      // });
      // TabBar
      if (getIsTabbar()) {
        uni.setTabBarStyle({
          selectedColor: value.themeColor,
        });
      }
    };

    return {
      /** 皮肤信息 */
      state,
      /** 获取类型 */
      getClass,
      /** 获取样式 */
      getStyle,
      /** 获取当前样式 */
      getCurrentStyle,
      /** 获取当前主题色 */
      getCurrentThemeColor,
      /** 获取类型列表 */
      getClassList,
      /** 获取主题颜色列表 */
      getThemeColorList,
      /** 设置类型 */
      setClass,
      /** 设置样式 */
      setStyle,
      /** 设置当前样式 */
      setCurrentStyle,
      /** 设置主题色 */
      setThemeColor,
      /** 获取主题色 */
      getThemeColor,
    };
  },
  {
    persist: true, // 如果需要持久化就写 true, 不需要持久化就写 false（或者去掉这个配置项）。
  },
);
